<template>
  <el-dialog :title="title" :visible.sync="openDialog_" :width="dialogWidth" center>
    <el-form ref="form" :model="form"  label-width="100px">
        <el-form-item label="企业" v-show='!show'>
            <el-input v-model="form.shtyxydm" placeholder="请输入统一社会信用代码" prefix-icon="el-icon-search"></el-input>
        </el-form-item>
        <el-form-item v-show='!show'>
            <div style="margin-left:-40px;display:flex;justify-content:center;">
                <el-button type="primary" @click="onSearch" round>查询</el-button>
            </div>
        </el-form-item>
    
        <div class="message" v-if="show">
            <div class="module">
                <el-tabs v-model="active">
                    <el-tab-pane label="企业信息" name="first">
                        <table class="detailtable">
                            <tr>
                                <td width="15%">企业名称</td>
                                <td width="35%">{{dataList.qymc}}</td>
                                <td width="15%">统一社会信用代码</td>
                                <td width="35%">{{dataList.shtyxydm}}</td>
                            </tr>
                            <tr>
                                <td width="15%">法人姓名</td>
                                <td width="35%">{{dataList.fddbr}}</td>
                                <!-- <td width="15%">联系方式</td>
                                <td width="35%">{{dataList.dh}}</td> -->
                                <td width="15%">注册时间</td>
                                <td width="35%">{{dataList.clrq}}</td>
                            </tr>
                            <tr>
                                <td width="15%">注册资金</td>
                                <td width="35%">{{dataList.zczb}}万元</td>
                                <td width="15%">所属行业</td>
                                <td width="35%">{{dataList.sshy}}</td>
                            </tr>
                            <tr>
                                <td width="15%">所属区域</td>
                                <td width="35%">{{dataList.ssqu}}</td>
                            </tr>
                            <tr>
                                <td width="15%">企业类型</td>
                                <td colspan="3">{{dataList.qylx | filterQylx(qylxList)}}</td>
                            </tr>
                            <tr>
                                <td width="15%">注册地址</td>
                                <td colspan="3">{{dataList.zs}}</td>
                            </tr>
                        </table>
                    </el-tab-pane>
                </el-tabs>
            </div>
<!--            <div class="module">-->
<!--                <el-tabs v-model="active">-->
<!--                    <el-tab-pane label="法人信息" name="first">-->
<!--                        <table class="detailtable">-->
<!--                            <tr>-->
<!--                                <td width="15%">法人姓名</td>-->
<!--                                <td width="35%">{{dataList.fddbr}}</td>-->
<!--                                <td width="15%">性别</td>-->
<!--                                <td width="35%">{{dataList.xb}}</td>-->
<!--                            </tr>-->
<!--                            <tr>-->
<!--                                <td width="15%">出生日期</td>-->
<!--                                <td width="35%">{{dataList.csrq}}</td>-->
<!--                                &lt;!&ndash; <td width="15%">籍贯</td>-->
<!--                                <td>{{dataList.jg}}</td>-->
<!--                                <td width="15%">婚姻状况</td>-->
<!--                                <td>{{dataList.hyzk}}</td> &ndash;&gt;-->
<!--                                <td width="15%">学历</td>-->
<!--                                <td width="35%">{{dataList.xl}}</td>-->
<!--                            </tr>-->
<!--                            <tr>-->
<!--                                <td width="15%">证件号码</td>-->
<!--                                <td width="35%">{{dataList.sfzjhm}}</td>-->
<!--                                <td width="15%">电话号码</td>-->
<!--                                <td width="35%">{{dataList.lxdh}}</td>-->
<!--                                &lt;!&ndash; <td width="15%">邮箱</td>-->
<!--                                <td>{{dataList.yx}}</td> &ndash;&gt;-->
<!--                            </tr>-->
<!--                            &lt;!&ndash; <tr>-->
<!--                                <td width="15%">联系地址</td>-->
<!--                                <td colspan="5">{{dataList.zs}}</td>-->
<!--                            </tr> &ndash;&gt;-->
<!--                        </table>-->
<!--                    </el-tab-pane>-->
<!--                </el-tabs>-->
<!--            </div>-->
            <div class="module">
                <el-tabs v-model="active">
                    <el-tab-pane label="列入原因" name="first">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="黑名单类型:" class="formItem">
                                    <el-select v-model="dataList.hmdzl" class="w100" placeholder="请选择黑名单类型">
                                        <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <el-form-item label="列入原因:">
                                    <el-input v-model="dataList.addCase" autosize type="textarea" placeholder="请输入列入原因"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="dialog-footer">
                <el-button @click="resetForm" type="primary" plain round>重置</el-button>
                <el-button @click="openDialog_ = false" type="primary" plain round>取消</el-button>
                <el-button type="primary" @click="submit" round>保存</el-button>
            </div>
        </div>
    </el-form>
</el-dialog>
</template>

<script>
import {getAllC} from '@/api/manager.js'

export default {
    name:'Company',
    props:['openDialog','qylxList','title','black'],
    data(){
        return{
            form:{},
            dataList:{},
            dialogWidth:'30%',
            show:false,
             rules: {
                xb: [
                    { required: true, message: '性别不能为空', trigger: 'blur' },
                ],
                hyzk:[
                    { required: true, message: '婚姻状况不能为空', trigger: 'blur' },
                ],
                sfzjhm:[
                    { required: true, message: '身份证号不能为空', trigger: 'blur' },
                ],
                lxdh:[
                    { required: true, message: '联系方式不能为空', trigger: 'blur' },
                ],
                zs:[
                    { required: true, message: '联系地址不能为空', trigger: 'blur' },
                ]
            },
            active:'first',
            activeName:'first',
            options:[
                {label:'存在强制执行',value:'存在强制执行'},
                {label:'负债较高',value:'负债较高'},
                {label:'多次逾期',value:'多次逾期'},
                {label:'其他',value:'其他'}
            ]
        }
    },
    methods:{
        submit(){
            let params = {
                addCase:this.dataList.addCase,
                hmdzl:this.dataList.hmdzl,
                shtyxydm:this.form.shtyxydm
            }
            this.$emit("save",params);
        },
        resetForm(){
            this.dialogWidth = '30%';
            this.form = {};
            this.dataList = {};
            this.show = false;
            //this.$refs["formMsg"].clearValidate();
        },
        onSearch(){
            if (!this.form.shtyxydm){
                this.$message.error("请输入企业的统一社会信用代码");
                return false;
            }
            let params = {
                shtyxydm:this.form.shtyxydm
            }
            getAllC(params).then(res=>{
                if(res.status){
                    this.dialogWidth = '60%';
                    this.show = true;
                    this.dataList = res.data;
                }else{
                    this.$message.error(res.msg);
                    return false;
                }
            });
        }
    },
    filters:{
        filterQylx(val,qylxList){
            var isnum = /^\d+$/.test(val);
            if(isnum){
                return qylxList.filter(item=>item.fieldCode == val)[0].fieldName;
            }else{
                return val;
            }
            
        }
    },
    computed:{
        openDialog_:{
            get(){
                return this.openDialog;
            },
            set(val){
                this.$emit("handleReset",val);
                if(!val){
                    this.resetForm();
                }
            }
        },
        isBalck:{
            get(){
                return this.black == 'black'?true:false;
            },
        }
        
    },

}
</script>

<style scoped lang="scss">
.dialog-footer {
  text-align: center;margin: 20px auto;
}
.title{
 font-weight: 900;
}
.detailtable{width: 100%; border-collapse: collapse; border-spacing: 0; border:#e5e5e5 solid 1px;}
.detailtable tr{width: 100%;}
.detailtable td{ padding: 8px 10px; text-align: left; line-height: 24px; font-size: 14px; color:#434343;  border:#e5e5e5 solid 1px;}
.detailtable td{font-weight: normal; background-color:#fff}
.detailtable td{word-break:break-all;}
/deep/ .row{display: flex;justify-content: space-between;}
.formItem {
  width: 100%;
  /deep/.el-form-item__content {
    width: calc(100% - 115px);
    /deep/.el-select,
    /deep/.el-cascader {
      width: 100%;
    }
    .w100 {
      width: 100% !important;
    }
  }
}
</style>